<template>
  <div>
    <hc></hc>
    <div class="flex w-80 px-20 box-sizing bg-ccc m-auto">
      <div>
        <Menu
          class="radius-base box-sizing pt-20 h-100"
          style="width:240px;"
          :default-active="defaultIndex"
          :active-name="defaultIndex"
          @on-select="gotoPath">
          <p class="f18 f-bold mt-20 pl-10">个人中心</p>
          <MenuItem
            v-for="(item) in leftList"
            :name="item.id"
            :key="item.id">
            <p class="my-10">
              {{ item.label }}
            </p>
          </MenuItem>
        </Menu>
      </div>
      
      <div class=" flex-1 ml-10" style="min-height:600px">
        <personal-info v-show="isShow === 0"></personal-info>
        <customer-order v-show="isShow === 1"></customer-order>
      </div>
    </div>
    <fc></fc>
  </div>
</template>

<script>
import hc from 'components/header-component'
import fc from 'components/floor-component'
import customerOrder from './components/customerOrder.vue'
import personalInfo from './components/personalInfo.vue'
import mixins from '@/mixins/index.js'
export default {
  components: {
    hc,
    fc,
    customerOrder,
    personalInfo
  },
  mixins: [mixins],
  data() {
    return {
      leftList: [
        {
          id: '1',
          label: '我的信息',
          path: '/personal-center'
        },
        {
          id: '2',
          label: '我的订单',
          path: 'customer-order'
        },
      ],
      defaultIndex: '1', // 默认选中
      isShow: 0, // 切换
    }
  },
  created () {
    this.defaultIndex = String(Number(this.$route.query.isShow) + 1) // 默认选中
    this.isShow = Number(this.$route.query.isShow) // 页面切换
  },
  methods: {
    gotoPath(row) {
      row = Number(row)
      if(row === 1) {
        this.isShow = 0
      } else if (row === 2) {
        this.isShow = 1
      }
    }
  }
  
}
</script>

<style>

</style>